// 导入依赖项
import { ajax } from '../utils/ajax.js';
import '../lib/jquery.js';

// DOM 元素
const elements = {
    listBox: $('.list'),                 // 商品列表
    categoryBox: $('.category'),         // 分类
    filterBox: $('.filterBox').first(),  // 热销/折扣
    saleBox: $('.saleBox'),              // 打几折
    sortBox: $('.sortBox'),              // 排序
    searchBox: $('.search'),             // 查询
    firstBtn: $('.first'),               // 首页按钮
    prevBtn: $('.prev'),                 // 上一页按钮
    nextBtn: $('.next'),                 // 下一页按钮
    lastBtn: $('.last'),                 // 末页按钮
    totalBox: $('.total'),               // 当前页 / 总页数
    pagesizeBox: $('.pagesize'),         // 一页显示条数
    jumpBox: $('.jump'),                 // 跳转页输入框
    jumpBtn: $('.go')                    // 跳转按钮
};

// 页面状态变量
let state = {
    current: 1,         // 当前页码
    pagesize: 12,       // 每页显示条数
    search: '',         // 搜索关键字
    filter: '',         // 热销/折扣筛选
    saleType: 10,       // 折扣类型，默认 10 表示全部
    sortType: 'id',     // 排序类型，默认按商品 id 排序
    sortMethod: 'ASC',  // 排序方式，默认升序
    category: ''        // 分类，默认为空表示全部
};

// 初始化页面
async function initializePage() {
    try {
        await renderCategory();     // 渲染分类列表
        await renderList();         // 渲染商品列表
        setupEventHandlers();       // 设置事件处理函数
    } catch (error) {
        console.error('页面初始化失败:', error);
    }
}

// 渲染分类列表
async function renderCategory() {
    try {
        const { data: { code, list } } = await ajax.get('/goods/category');
        if (code !== 1) {
            throw new Error('获取分类列表失败');
        }
        // 构建分类项列表
        const categories = ['全部', ...list];
        const categoryItems = categories.map(category => `<li>${category}</li>`).join('');
        elements.categoryBox.html(categoryItems);  // 更新分类列表
    } catch (error) {
        console.error('获取分类列表失败:', error);
    }
}

// 渲染商品列表
async function renderList() {
    try {
        const { data: { code, list, total } } = await ajax.get('/goods/list', { params: state });
        if (code !== 1) {
            throw new Error('获取商品列表失败');
        }
        // 构建商品列表项
        const productList = list.map(product => `
            <li data-id="${product.goods_id}">
                <div class="show">
                    <img src="${product.img_big_logo}">
                    ${product.is_hot ? '<span class="hot">热销</span>' : ''}
                    ${product.is_sale ? '<span>折扣</span>' : ''}
                </div>
                <div class="info">
                    <p class="title">${product.title}</p>
                    <p class="price">
                        <span class="curr">¥ ${product.current_price}</span>
                        <span class="old">¥ ${product.price}</span>
                    </p>
                </div>
            </li>`).join('');
        elements.listBox.html(productList);  // 更新商品列表
        state.current = 1;                  // 重置当前页为第一页
        state.totalPage = total;            // 更新总页数
        updatePagination();                 // 更新分页按钮状态
    } catch (error) {
        console.error('渲染商品列表失败:', error);
    }
}

// 更新分页按钮状态
function updatePagination() {
    elements.totalBox.text(`${state.current} / ${state.totalPage}`);  // 更新显示当前页 / 总页数
    elements.jumpBox.val(`${state.current}`);                        // 更新跳转页输入框
    // 根据当前页更新首页、上一页、下一页、末页按钮的禁用状态
    elements.prevBtn.add(elements.firstBtn).toggleClass('disable', state.current <= 1);
    elements.nextBtn.add(elements.lastBtn).toggleClass('disable', state.current >= state.totalPage);
}

// 设置事件处理函数
function setupEventHandlers() {
    // 分类点击事件
    elements.categoryBox.on('click', 'li', function () {
        elements.categoryBox.children().removeClass('active');
        $(this).addClass('active');
        state.category = ($(this).text().trim() === '全部') ? '' : $(this).text().trim();
        renderList();
    });

    // 首页按钮点击事件
    elements.firstBtn.on('click', () => {
        state.current = 1;
        renderList();
    });

    // 末页按钮点击事件
    elements.lastBtn.on('click', () => {
        state.current = state.totalPage;
        renderList();
    });

    // 上一页按钮点击事件
    elements.prevBtn.on('click', () => {
        if (state.current > 1) {
            state.current--;
            renderList();
        }
    });

    // 下一页按钮点击事件
    elements.nextBtn.on('click', () => {
        if (state.current < state.totalPage) {
            state.current++;
            renderList();
        }
    });

    // 跳转按钮点击事件
    elements.jumpBtn.on('click', () => {
        const targetPage = parseInt(elements.jumpBox.val());
        if (targetPage >= 1 && targetPage <= state.totalPage) {
            state.current = targetPage;
            renderList();
        } else {
            alert('跳转页数不合法');
        }
    });

    // 一页显示条数变化事件
    elements.pagesizeBox.on('change', () => {
        state.pagesize = parseInt(elements.pagesizeBox.val());
        renderList();
    });

    // 热销/折扣点击事件
    elements.filterBox.on('click', 'li', function () {
        elements.filterBox.children().removeClass('active');
        $(this).addClass('active');
        state.filter = $(this).data('type');
        state.current = 1;
        renderList();
    });

    // 打几折点击事件
    elements.saleBox.on('click', 'li', function () {
        elements.saleBox.children().removeClass('active');
        $(this).addClass('active');
        state.saleType = $(this).data('type');
        state.current = 1;
        renderList();
    });

    // 排序点击事件
    elements.sortBox.on('click', 'li', function () {
        elements.sortBox.children().removeClass('active');
        $(this).addClass('active');
        state.sortType = $(this).data('type');
        state.sortMethod = $(this).data('method');
        state.current = 1;
        renderList();
    });

    // 搜索框输入事件
    elements.searchBox.on('input', () => {
        state.search = elements.searchBox.val().trim();
        state.current = 1;
        renderList();
    });

    // 商品详情点击事件
    elements.listBox.on('click', 'li', function () {
        const id = $(this).data('id');
        sessionStorage.setItem('id', id);
        location.href = './detail.html';
    });
}

// 初始化页面
initializePage();
